<template>
  <div class="app-container">
    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增考评指标</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="dataList"
      @selection-change="handleSelectionChange"
      default-expand-all
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >      
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" :index="table_index" label="序号" align="center"/>
      <el-table-column prop="id" align="center" v-if="false"/>
      <el-table-column label="考评指标" prop="indicatorName" align="center"/>
      <el-table-column label="指标类型" prop="type" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type === '0'">一级考评指标</span>
          <span v-else-if="scope.row.type === '1'">二级考评指标</span>
          <span v-else-if="scope.row.type === '2'">总评</span>
        </template>       
      </el-table-column>
      <el-table-column label="上级考评指标" prop="pid" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.pid">
            {{getLable(firstLevelIndicatorOption, scope.row.pid, "id", "indicatorName")}}</span>
          <span v-else>——</span>

        </template>        
      </el-table-column>
      <el-table-column label="描述" prop="remark" align="center" show-overflow-tooltip/>
      <el-table-column label="创建时间" align="center" prop="createTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" prop="modifyTime" >
        <template slot-scope="scope">
            <span v-if="scope.row.modifyTime">{{ parseTime(scope.row.modifyTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.pid==0"
                  size="mini"
                  circle type="primary"
                  icon="el-icon-plus"
                  @click="handleAdd(scope.row)"
                  v-hasPermi="['system:dept:add']"
          />
          <el-button
                size="mini"
                circle type="success"
                icon="el-icon-edit"
                title="修改"
                @click="handleUpdate(scope.row)"
          />
          <el-button
                size="mini"
                circle type="danger"
                icon="el-icon-delete"
                title="删除"
                @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
        :title="title"
        :visible.sync="open"
        width="50%"
        :before-close="handleClose"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="20px"
      >
        <el-form-item label="id" prop="id" v-if="false">
          <el-input v-model="form.id"></el-input
        ></el-form-item>
        <el-form-item label="考评指标" prop="indicatorName" label-width="100px">
          <el-input
            style="width: 100%"
            v-model="form.indicatorName"
            placeholder="请输入考评指标名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="指标类型" prop="type" label-width="100px">
            <el-select
                v-model="form.type"
                clearable
                filterable
                placeholder="请选择指标类型"
                style="width: 100%"
                @change="isShowFirstLevel"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option
            ></el-select>
        </el-form-item>
        <el-form-item label="上级指标" prop="pid" label-width="100px" v-if="showFirstLevel">
            <el-select
                v-model="form.pid"
                clearable
                filterable
                placeholder="请选择一级指标"
                style="width: 100%"
            >
                <el-option
                    v-for="item in firstLevelIndicatorOption"
                    :key="item.id"
                    :label="item.indicatorName"
                    :value="item.id"
                >
                </el-option
            ></el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="100px">
          <el-input
            style="width: 100%"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createStuEvaIndicator,findFirstLevelIndicator,findStuEvaIndicatorPageList,deleteStuEvaIndicatorById } from "@/api/stu/evaluation/indicator";

export default {
    name: "stuEvaIndicator",
    data(){
        return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 角色表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            //考评指标类型
            typeOption:[{
                label:"一级考评指标",
                value:"0",
            },            
            {
                label:"二级考评指标",
                value:"1",
            }],
            firstLevelIndicatorOption:[],
            showFirstLevel:false,
            // 表单参数
            form: {
                id: undefined,
                indicatorName: undefined,
                type:undefined,
                pid:undefined,
                remark:undefined
            },
            rules:{
                indicatorName:[{ required: true, message: '考评指标名称不能为空',trigger:"blur"}], 
                type:[{ required: true, message: '类型不能为空',trigger:"change"}],
                // pid:[{ validate:validatePid,trigger:"blur"}]
            }          
        }
    },
    created() {
      this.getList();
      this.getFirstLevelIndicator();
    },
    methods:{
        /** 分页序号自增 */
        table_index(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
            );
        },
        /** 多选 */
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        //获取一级考评指标
        getFirstLevelIndicator(){
            findFirstLevelIndicator().then(resp =>{
                this.firstLevelIndicatorOption = resp.data
            })
        },
        isShowFirstLevel(){
            if(this.form.type == "0"){
                this.showFirstLevel = false
            }
            if(this.form.type == "1"){
                this.showFirstLevel = true
            }
            if(this.form.type == "2"){
                this.showFirstLevel = false
            }
        },

        // 查询
        getList() {
            this.loading = true;
            findStuEvaIndicatorPageList(this.queryParams).then(resp =>{
                this.dataList = resp.data
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置查询 */
        resetQuery() {
            this.resetForm("queryParams");
            this.handleQuery();
        },

        /** 新增配置 */
        handleAdd(row) {
            this.reset();
            this.open = true;
            this.title = "新增";
            this.showFirstLevel = false
            if(row){
              this.form.type="1"
              this.showFirstLevel = true
              this.form.pid = row.id
            }
        },
        /** 重置表单 */
        reset() {
            this.form = {
                id: undefined,
                indicatorName: undefined,
                type:undefined,
                pid:undefined,
                remark:undefined
            };
            //清楚上次的表单校验
            this.$nextTick(() =>{
                this.$refs["form"].clearValidate()
            })
        },
        /** 关闭弹窗 */
        handleClose(done) {
          this.open = false
        },
        //提交
        submitForm:function(){
          this.$refs["form"].validate(valid =>{
            if (valid){
                createStuEvaIndicator(this.form).then(resp =>{
                    if(resp.code === 200){
                        this.$message({ message: "新增成功", type: "success" });
                        this.open = false;
                        this.getList();
                    }else{
                        this.$message({ message: resp.message, type: "error" });
                    }  
                })
            }
          })
        },

        //更新
        handleUpdate(row){
            this.open = true;
            this.form = row;
            if(this.form.type == '1'){
                this.showFirstLevel = true
            }else{
                this.showFirstLevel = false
            }
            this.title = "修改"
        },
        //删除
        handleDelete(row){
          this.$confirm("是否确认删除数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(function() {
              return deleteStuEvaIndicatorById(row.id);
            })
            .then(() => {
              this.getList();
              this.msgSuccess("删除成功");
            })
            .catch(function() {});
        }
    }

};
</script>

<style>
</style>